<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <div style="margin-top:60px">
          <info-tree @clickTree="clickTree" />
        </div>
      </el-aside>
      <el-main>
        <div class="main-top"><span>地区关键词:</span><el-input size="medium" placeholder="请输入地区关键词" />
        </div><div id="map-container">
          <!-- <china-baidu-map ref="map" :info-list="infoList" /> -->
        </div>
      </el-main>
    </el-container></div>
</template>

<script>

import InfoTree from '@/views/DataManagement/components/InfoTree.vue'
//  ChinaBaiduMap
// import ChinaBaiduMap from '@/views/DataManagement/components/ChinaBaiduMap.vue'
export default {
  name: 'ChinaBaiduMap',
  components: {
    InfoTree

  },
  data() {
    return {
      infoList: {}
    }
  },
  methods: {
    clickTree(data) {
      this.infoList = data
      this.$refs.map.huan()
    }
  }

}
</script>

<style lang="scss" >
  .el-aside {
    background-color: #fff;
    color: #333;
    text-align: center;
    line-height: 200px;
    margin: 0 20px;
  }

  .el-main {
    background-color: #fff;
    color: #333;
    text-align: center;
    line-height: 160px;
    .main-top{
      display: flex;
      span{
        margin-left: 20px;
        margin-top: 20px;
        margin-right: 20px;

      }
      .el-input{
        width: 300px;
        margin-top: 20px;
      }
    }
  }

</style>
